<div th:fragment="navbar" class="jax-header">
    <header class="main-header">
        <a href="/index" class="logo">
            <span class="logo-mini"><b>NB</b></span>
            <span class="logo-lg"><b>Nb</b>Class</span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown messages-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success">4</span>
                        </a>
                    </li>
                    <li class="dropdown notifications-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="label label-warning">10</span>
                        </a>
                    </li>
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img th:src="@{/img/person.jpg}" class="user-image" alt="User Image">
                            <span><shiro:principal property="username" /></span>
                            <span id="userId" style="display: none"><shiro:principal property="userId" /></span>
                        </a>
                        <ul class="dropdown-menu dropdown-left">
                            <li><a id="userInfoBtn" href="#">个人信息</a></li>
                            <li><a id="changePasswordBtn" href="#" data-toggle="modal" data-target="#passwordModal">修改密码</a></li>
                            <li class="divider"></li>
                            <li><a id="logoutBtn" href="#">退出系统</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog"  role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <p id="myInfoOpenWindow"></p>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div id="passwordModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改密码</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form class="form-horizontal" id="passwordForm">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="oldPassword" class="col-sm-3 control-label">旧密码 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="oldPassword" id="oldPassword" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password" class="col-sm-3 control-label">新密码 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="newPassword" id="password" password="" pwdCheck="" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="confirmPassword" class="col-sm-3 control-label">确认新密码 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="confirmNewPassword" id="confirmPassword" password=""  require="必填项" placeholder="">
                                    </div>
                                </div>

                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="savePassword" class="btn btn-info">确定</button>
                                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <script>
        $(function () {
            //修改信息
            $("#userInfoBtn").on('click', function () {
                Core.load("#myInfoOpenWindow","/user/edit?userId="+$("#userId").text(), function(){
                    $("#myModal").modal("show");
                });
            })
            /*退出登录*/
            $("#logoutBtn").on('click', function () {
                Core.confirm("确认退出？",function () {
                    Core.postAjax("/logout",{},function(data){
                        if(data.status==200){
                            window.location.href="/login";
                        }else{
                            layer.msg(data.msg);
                        }
                    })
                })
            })
            /*修改密码*/
            $("#changePasswordBtn").on('click', function () {
                $("#passwordForm")[0].reset();
                Core.clearError("#passwordForm");
            })
            /*确定修改密码*/
            $("#savePassword").on('click', function () {
                if(doValidForm(passwordForm)){
                    Core.mask("#savePassword")
                    Core.postAjax("/user/changePassword",$("#passwordForm").serialize(),function(data){
                        Core.unmask("#savePassword")
                        if(data.status==200){
                            $("#passwordModal").modal("hide");
                            layer.msg('密码修改成功!');
                        }else{
                            layer.msg(data.msg);
                        }
                    })
                }
            })

            $("#passwordForm").keyup(function(event){
                if(event.keyCode ==13){
                    $("#savePassword").click();
                }
            });
        });
    </script>
</div>